import React, { Component } from "react";
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";
import "./index.scss";
import { Toast } from "antd-mobile";
import { InterfaceG, clientCodeObj, sSecurityUrl } from "@config/Config";
import yhTools from "@tools/yh";
import Icon from "@component/icon";
import { Button } from "antd-mobile";
import { openWebView } from "@tools/native/navigate";
/**
 * 钱包首页轮播
 */
class ScrollxImage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			is_szModal: false,
			time: 3,
			btnDisabled: true
		};
		this.mySwiper = null;
		this.interval = null; // 倒计时计时器
	}
	componentDidMount() {
		let _this = this;
		this.props.onRef(this);
		this.mySwiper = new Swiper(".global-promotion", {
			slidesPerView: 1.48,
			slidesOffsetAfter: 124,
			watchSlidesProgress: true,
			on: {
				slideChange: function () {
					_this.props.setSelect(this.activeIndex);
				}
			}
		});
	}
	componentWillUnmount = () => {
		this.clearInterval();
	};
	updateSlides = () => {
		this.mySwiper && this.mySwiper.updateSlides();
	};

	/**
	 * @msg: 查询授信状态
	 * @param {*}
	 * @return {*}
	 */
	credit_queryCreditApplyStatus = async () => {
		Toast.loading("加载中...", 100);
		const objs = {
			url: InterfaceG.credit_queryCreditApplyStatus,
			params: { pruductNum: "601" }
		};
		return await yhTools.request(objs).then(res => {
			let pathname = "";
			if (res.code === "0") {
				if (res.data) {
					const { applyStatus } = res.data;
					//0未授信，1已授信，2授信中，4授信拒绝

					if (applyStatus === "0") {
						pathname = "/xhfHomeNoCredit";
					} else if (applyStatus === "1") {
						pathname = "/xhfHomeCredit";
					} else if (applyStatus === "2") {
						pathname = "/xhfHomeCrediting";
					} else if (applyStatus === "4") {
						pathname = "/xhfHomeNoCredit";
					}
				}
			} else {
				Toast.info(res.message, 2);
			}
			Toast.hide();
			return pathname;
		});
	};

	//跳到第几个
	handleTo = index => {
		this.mySwiper.slideTo(index);
	};
	// 下一个
	handleNext = () => {
		this.mySwiper.slideNext();
	};
	//上一个
	handleprev = () => {
		this.mySwiper.slidePrev();
	};
	//去小辉付
	handleToXhf = async xhfStatus => {
		let pathname = await this.credit_queryCreditApplyStatus();
		console.log("pathname-->", pathname);
		this.props.history.push({
			pathname,
			query: {
				//随便传一个参数，小辉付主页识别query，判断是否正常返回还是关闭SDK
				from: "xhqb"
			}
		});
	};
	//去小辉宝
	handleToXhb = () => {
		this.props.history.push({
			pathname: "/walletHome",
			query: {
				//随便传一个参数，小辉宝主页识别query，判断是否正常返回还是关闭SDK
				from: "xhqb"
			}
		});
	};
	//去小辉贷
	handleToXhd = () => {
		this.props.history.push({
			pathname: "/xhdHome",
			query: {
				//随便传一个参数，小辉贷主页识别query，判断是否正常返回还是关闭SDK
				from: "xhqb"
			}
		});
	};
	//去山证
	handleToSz = () => {
		/* this.props.history.push({
			pathname: "/advertising/sSecurity/index"
		}); */
		this.setState({
			is_szModal: true
		});
		this.downTime();
	};

	downTime() {
		let { time } = this.state;
		this.interval = setInterval(() => {
			if (time < 1) {
				this.setState({
					btnDisabled: false
				});
				this.clearInterval();
			} else {
				this.setState({
					time: time--
				});
			}
		}, 1000);
	}
	clearInterval() {
		if (this.interval) {
			clearInterval(this.interval);
			this.interval = null;
		}
	}

	szModalBtnClick = () => {
		openWebView({
			url: `${sSecurityUrl}?ts=${new Date().getTime()}`
		});
	};
	render() {
		let {
			xhbStatus,
			xhbAmount,
			xhbRate,
			xhfStatus,
			xhfAvailableAmount,
			xhfMaxAmount,
			xhdStatus,
			xhdAvailableAmount,
			xhdMaxAmount,
			realExhibition,
			sdkVersionCode
		} = this.props.data;
		const { clientCode = "" } = clientCodeObj;
		console.log("clientCodeObj", clientCodeObj);
		const { is_szModal, btnDisabled, time } = this.state;
		return (
			<div className="component-scrollxImage swiper-container global-promotion">
				<div className="swiper-wrapper">
					<div className="swiper-slide">
						<div className="item list-one">
							<p className="item-title">小辉付</p>
							<p className="item-desc1">
								{xhfStatus === "1"
									? `可用额度：${xhfAvailableAmount}`
									: "本月花下月还"}
							</p>
							<p className="item-desc2">
								{xhfStatus === "1"
									? `总额度：${xhfMaxAmount}`
									: "最长35天免息，最高5万元"}
							</p>
							<div
								className="btn"
								onClick={() => {
									this.handleToXhf(xhfStatus);
								}}
							>
								{xhfStatus === "1" ? "立即查看" : "立即开通"}
							</div>
						</div>
					</div>
					<div className="swiper-slide">
						<div className="item list-two">
							<p className="item-title">小辉宝</p>
							<p className="item-desc1">尊享超市充值卡权益</p>
							<p className="item-desc2">
								{xhbStatus == "0" ? `余额：${xhbAmount}` : "电子账户存款利息"}
							</p>
							<div className="btn" onClick={this.handleToXhb}>
								{xhbStatus == "0" ? "立即查看" : "立即赚钱"}
							</div>
						</div>
					</div>
					<div className="swiper-slide">
						<div className="item list-three">
							<p className="item-title">小辉贷</p>
							<p className="item-desc1">
								{xhdStatus === "1"
									? `可用额度：${xhdAvailableAmount}`
									: "最高可借20万元"}
							</p>
							<p className="item-desc2">
								{xhdStatus === "1"
									? `授信额度：${xhdMaxAmount}`
									: "年化利率(单利)7.2%起"}
							</p>
							<div className="btn" onClick={this.handleToXhd}>
								{xhdStatus === "1" ? "立即查看" : "立即申请"}
							</div>
						</div>
					</div>
					{realExhibition && yhTools.getSdkVersion(sdkVersionCode) >= 105 && (
						<div className="swiper-slide">
							<div className="item list-four" onClick={this.handleToSz}>
								<p className="item-title font-cfff">
									<Icon code="iconlogo_sz" className="logo_sz icon svg-icon" />
									<span className="item-title-text">山西证券</span>
								</p>
								<p className="item-desc3">专业理财，助您优选好产品</p>
								<div className="btn1">立即体验</div>
								<div className="tips-box">机构专区</div>
								{clientCode === "05" && <div className="item-tips">广告</div>}
							</div>
						</div>
					)}
				</div>

				{is_szModal && (
					<div className="crollxImage-szModal-wrap ui-flex ui-flex-justify-center ui-flex-align-center">
						<div className="scrollxImage-szModal">
							<div className="szModal-title f-32">山西证券</div>
							<div className="szModal-content f-28">
								<div className="content-word">
									永辉作为信息展示平台为山西证券提供链接跳转等信息辅助服务，山西证券对发布内容的真实性、准确性、完整性、合法性和有效性负责。投资人通过永辉平台发布的链接信息跳转至山西证券页面发生的任何交易行为，产生的风险由投资人自行承担，永辉不对该交易行为做任何明示或默示担保。因该等交易行为产生的任何纠纷，由投资人和山西证券之间自行解决，永辉对此不承担任何责任。
								</div>
							</div>
							<div className="szModal-btn ui-flex ui-flex-justify-center ui-flex-align-center">
								<Button
									className="btn-item btn-cancel ui-flex ui-col"
									onClick={() => {
										this.setState({
											is_szModal: false
										});
									}}
								>
									取消
								</Button>
								<Button
									className="btn-item btn-confirm ui-flex ui-col"
									disabled={btnDisabled}
									onClick={() => {
										this.szModalBtnClick();
									}}
								>
									{btnDisabled ? `${time}秒后确认` : "确认"}
								</Button>
							</div>
						</div>
					</div>
				)}
			</div>
		);
	}
}

export default ScrollxImage;
